<template>
  <div class="bg">
    <div class="top_nav">
      <img @click="returnTap"
        class="return_icon"
        src="../../../static/images/me/more.jpg"
        alt=""
      />
      <span class="title">消息</span>
      <span class="btn" @click="showlist"> 清空</span>
    </div>
    <div class="list" v-for="item in 10" :key="item">
        <img src="../../../static/images/me/headimg.png" alt="" class="left_img">
        <div class="list_concent">
            <div class="concent_name">明</div>
            <div class="concent_text">这面真的很难吃</div>
            <div class="concent_time">下午 1:10</div>
        </div>
         <img src="../../../static/images/me/headimg.png" alt="" class="right_img">
    </div>
   <bottomList v-if="isshowlist" @closemodal="closemodal" @skiptopublish="cleanAll"  :childlish="childlish" ></bottomList>
   
  </div>
</template>
<script>
import bottomList from "@/components/bottomList.vue"

export default {
     components:{
    bottomList
  },
  data() {
    return {
      isshowlist:false,
      childlish:[{text:'清空所有消息',colorred:true}]
    };
  },
  methods: {
       returnTap(){
          this.$router.go(-1)
      },
   showlist(){
    this.isshowlist = !this.isshowlist 
   },
   closemodal(){
       this.showlist()
   },
   cleanAll(){

   },
   
  },
};
</script>
<style scoped>

.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 25px;
   background: #eeeeee;
}
.return_icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}
.btn {
  /* color: #06c25f; */
}
.title{
font-weight: 600;
}
.list{
    display: flex;
    align-items: flex-start;
    margin: 10px 0 10px 10px;
    padding-right: 10px;
    border-bottom: 1px solid #e3e4e5;
}
.left_img{
    width: 40px;
    height: 40px;   
}
.list_concent{
    margin: 0 10px ;
    width: 70%;
}
.concent_name{
   color: #5E7293;
}
.concent_text{
 font-size: 15px;
 margin: 5px 0;
}
.concent_time{
    color: #868686;
    font-size: 14px;
}
.right_img{
    width: 60px;
    height: 60px;
}
</style>